<template>
  <!-- 漏斗分析保存 -->
  <div id="preserVation">
    <!-- 弹框 -->
    <div class="icon2">
      <el-button
        type="primary"
        icon="el-icon-tickets ticket"
        class="sea rch2"
        @click="saves"
        >保存
      </el-button>
    </div>

    <el-dialog
      title
      :visible.sync="dialogFormVisible"
      append-to-body
      style="width: 1400px;margin: 0 auto;border-radius: 2px"
    >
      <el-tabs
        v-model="activeName"
        @tab-click="handleClick"
        class="tabs"
        style="width: 650px;height: 350px"
      >
        <!--        更新当前书签-->
        <!--<el-tab-pane label="更新当前书签" name="updatemark" v-if="bookmarkId">
          <el-form
            ref="form"
            :model="updatemark"
            label-width="80px"
            style="margin-bottom: 50px"
          >
            &lt;!&ndash; 名称 &ndash;&gt;
            <el-form-item
              label="名称"
              style="margin-left: -28px;margin-top: 20px"
            >
              <el-input
                v-model="updatemark.name"
                style="margin-left: 80px;width: 400px"
              ></el-input>
            </el-form-item>

            &lt;!&ndash; 备注 &ndash;&gt;
            <el-form-item label="备注" style="margin-left: -26px">
              <el-input
                type="textarea"
                v-model="updatemark.remark"
                placeholder="可输入备注信息"
                style="margin-left: 80px;width: 400px"
              ></el-input>
            </el-form-item>
          </el-form>
        </el-tab-pane>-->

        <!-- 添加到概览 -->
        <el-tab-pane label="添加到概览" name="overview">
          <!-- 概览类型 -->
          <el-form ref="form" :model="overView" label-width="80px">
            <el-form-item label="概览类型" class="over first">
              <el-radio-group
								@change="handleQueryOverviewList"
								v-model="overView.resource"
                style="margin-left: 50px"
              >
								<el-radio :label="0">公共概览</el-radio>
								<el-radio :label="1">我的概览</el-radio>
              </el-radio-group>
            </el-form-item>
            <div
              class="myoverview"
              style="margin: -25px 0 20px 130px;font-size: 12px;
										line-height: 18px;
										color: #8492a6;"
            >
							<p v-if="overView.resource == 1">我的概览仅支持本人查看</p>
							<p v-else>公共概览可支持他人查看</p>
            </div>

            <!-- 名称 -->
            <el-form-item
              label="名称"
              class="name first"
              style="margin-left: -28px"
            >
              <el-input
                v-model="overView.name"
                style="margin-left: 80px;width: 400px"
                >搜索结果转化为漏斗</el-input
              >
            </el-form-item>

            <!-- 选择概览 -->
            <el-form-item label="选择概览" class="select first">
              <el-select
								multiple
								clearable
								filterable
                v-model="overView.select"
                placeholder="请选择概览"
                style="margin-left: 53px;width: 400px"
              >
								<el-option
									v-for="item in overviewList"
									:key="item.id"
									:label="item.overviewName"
									:value="item.id">
								</el-option>
              </el-select>
            </el-form-item>

            <!-- 备注 -->
            <el-form-item
              label="备注"
              class="mark first"
              style="margin-left: -26px"
            >
              <el-input
                type="textarea"
                v-model="overView.remark"
                placeholder="可输入备注信息"
                style="margin-left: 80px;width: 400px"
              ></el-input>
            </el-form-item>
          </el-form>
        </el-tab-pane>

        <!-- 保存为书签 -->
       <!-- <el-tab-pane label="保存为书签" name="bookmark">
          <el-form ref="form" :model="bookMark" label-width="80px">
            &lt;!&ndash;            书签类型&ndash;&gt;
            <el-form-item label="书签类型">
              <el-radio-group v-model="bookMark.type" style="margin-left: 50px;">
                <el-radio :label="1">我的书签</el-radio>
              </el-radio-group>
            </el-form-item>
            <div
              class="mybookemark"
              style="margin: 0px 0 20px 130px;font-size: 12px;
      line-height: 18px;
      color: #8492a6;"
            >
              我的书签可以在书签页面查看，支持添加到我的概览中，不支持添加到公共概览
            </div>

            &lt;!&ndash; 名称 &ndash;&gt;
            <el-form-item label="名称" style="margin-left: -28px">
              <el-input
                v-model="bookMark.name"
                style="margin-left: 80px;width: 400px"
              ></el-input>
            </el-form-item>

            &lt;!&ndash; 备注 &ndash;&gt;
            <el-form-item label="备注" style="margin-left: -26px">
              <el-input
                type="textarea"
                v-model="bookMark.remark"
                placeholder="可输入备注信息"
                style="margin-left: 80px;width: 400px"
              ></el-input>
            </el-form-item>
          </el-form>
        </el-tab-pane>-->
      </el-tabs>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="save">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { thinglList,bookmarkCreate, bookmarkDetail } from "./api.config";
import { operationCtx } from "../../../utils/auth";
export default {
  name: "preserVation",
  data() {
    return {
      show: false,
      dialogFormVisible: false,
      activeName: "overview",
      overView: {
        //添加到概览
        resource: 0,
        name: "搜索结果转化为漏斗",
        select: "",
        remark: ""
      },
      updatemark: {
        //更新当前书签
        name: "",
        remark: ""
      },
      bookMark: {
        //保存为书签
        type: 1,
        name: "搜索结果转化为漏斗",
        remark: ""
      },
      form: {
        delivery: false
      },
      formLabelWidth: "120px",
      choose: [],
			overviewList: [],   // 概览列表
    };
  },
  components: {},
  created() {
		this.handleQueryOverviewList();
  },
  methods: {
		// 查询概览列表
		async handleQueryOverviewList() {
			this.overView.select = '';
			let appId = this.$store.state.global.appItem.appId;
			let data = {
				appId,
				overviewGroupType: this.overView.resource,
				currentPage: this.bookMark.type,
				pageSize: 10000
			};
			let res = await this.$analysisApi.dataCard.overviewList(data);
			if (res) {
				this.overviewList = res.value.list;
			}
		},
    handleClick(tab, event) {
      console.log(tab, event);
    },
    saves(){
      this.dialogFormVisible=true;
    },

    save() {
			if (this.activeName === 'overview') {
				this.handleSaveGrid();
			} else {
				var arr = [];
				if(this.overView.select){
					arr.push(this.overView.select)
				};
				// 分享书签新建
				bookmarkCreate({
					name: this.overView.name,
					dashboardIds: arr,
					bookmark: this.bookMark.remark,
					data: JSON.stringify(this.obj),
					config: "{}",
					type: "segmentation",
					mode: 0
				}).then(res => {
					// 返回状态码返回状态如果不是 true，说明数据异常，需弹窗提示
					if (res.data.success !== true) {
						this.$message.error(res.data.errorMessage);
						return;
					}

					this.dialogFormVisible = false;
				});
				// bookmarkUpdate({id:''}).then(res => {
				//   console.log(res.data.data)
				// })
			}
		},

		// 保存概览
      async handleSaveGrid() {
          let _this = this
          this.$emit("getSearchParams",async req=>{
              let params = {
                  req: req,
                  operationCtx: operationCtx
              }
              let {name, select, remark} = this.overView;
              let obj = {
                  chartType: 4,
                  appId: _this.$store.state.global.appItem.appId,
                  windowSize: 2,
                  queryJson: JSON.stringify(params),
                  type: 2,
                  overviewIds: select,
                  name,
                  remarks: remark
              };
              let res = await this.$analysisApi.eventAnalysis.overviewComponentAdd(obj);
              try {
                  if (res) {
                      _this.$message.success("保存成功");
                      _this.dialogFormVisible = false;
                  }
              } catch (e) {
                  _this.$message.success("保存失败");
              }
          })
      }
  },
  mounted() {

  }
};
</script>

<style lang="scss" scoped>
::v-deep .el-form-item{
  margin-bottom: 20px!important;
}
#preserVation {
  position: relative;
  display: flex;
  justify-content: flex-end;
  align-items: center;
}

.icon2 {
  position: relative;
  display: flex;
  float: left;
  left: -7px;
  top: 20px;

  .sea {
    display: flex;
    margin-top: -40px;
    height: 20px;
    background: none;
    border: none;
    font-size: 14px;
    color: #559ff0;
    cursor: pointer;
  }

  .tabs {
    margin-top: -30px;
  }
}
</style>

<style scoped>
#preserVation {
  height: 100%;
  position: relative;
}

::v-deep  .el-dialog__header {
  padding-bottom: 0;
  padding: 0;
}</style
>>
